<template>
  <div class="register-container">
    <el-row>
      <el-col>
        <div class="background">
          <!--<img src="~@/assets/background_images/img.png">-->
          <video loop src="@/assets/background_images/back.webm" autoplay="autoplay" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-divider>
          <span class="title">注册</span>
        </el-divider>
      </el-col>
    </el-row>
    <el-form ref="registerForm" v-loading="loading" status-icon :model="registerForm" :rules="registerRules" inline-message auto-complete="on">
      <div style="margin: 60px 0 0 0;" />
      <el-form-item prop="username">
        <el-col :span="6" :offset="9">
          <el-input v-model="registerForm.username" class="register-item" placeholder="用户名">
            <i slot="prefix" class="el-icon-user" />
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item prop="phone">
        <el-col :span="6" :offset="9">
          <el-input v-model="registerForm.phone" class="register-item" placeholder="手机号">
            <i slot="prefix" class="el-icon-mobile-phone" />
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item prop="password">
        <el-col :span="6" :offset="9">
          <el-input v-model="registerForm.password" class="register-item" type="password" placeholder="密码">
            <i slot="prefix" class="el-icon-lock" />
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-col :span="6" :offset="9">
          <el-input v-model="registerForm.checkPass" class="register-item" type="password" placeholder="确认密码">
            <i slot="prefix" class="el-icon-lock" />
          </el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="6" :offset="9">
        <el-button type="primary" style="width: 100%;margin: 30px 0 10px 0;" :loading="loading" @click="handleRegister">注册</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :offset="13">
        <el-link type="primary" @click="toLogin">已有账号，直接登录></el-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { isExit, createUser } from '@/api/user'
import { Message } from 'element-ui'

export default {
  name: 'Register',
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        isExit(value).then(response => {
          const res = response.data
          if (res.code === 500) {
            callback(new Error('账号已存在，请更换一个账号'))
          } else callback()
        })
      }
    }
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机'))
      } else {
        var regExp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (!regExp.test(value)) {
          callback(new Error('请输入正确的手机号'))
        }
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (value.length < 6) {
          callback(new Error('密码至少为6位'))
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        username: '',
        phone: '',
        password: '',
        checkPass: ''
      },
      registerRules: {
        username: [
          { require: true, validator: validateUsername, trigger: 'blur' }
        ],
        phone: [
          { require: true, validator: validatePhone, trigger: 'blur' }
        ],
        password: [
          { require: true, validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { require: true, validator: validatePass2, trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    toLogin() {
      this.$router.push({ path: '/login' })
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true
          createUser(this.registerForm).then(response => {
            if (response.code === 200) {
              Message({
                message: '注册成功',
                type: 'success'
              })
              this.loading = false
              this.$router.push({ path: '/login' })
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.register-container {
  height: 100%;
  width: 100%;
  background-color: #fff;
  overflow-x: hidden;

  .background {
    height: 100%;
    top: 0;
    left: 0;
    margin-bottom: 10px;
  }

  .title {
    font-size: 38px;
  }

  .register-item {
    margin: 10px 0;
  }
}
</style>
